ガント


ガントビューによるグループ化方式を使用すると、階層関係を視覚的に表示できます。ガントビューでは、開始日と終了日を分かりやすく表示できます。これにより、日単位、週単位、月単位、または年単位で、タスクと成果物をタイムスケールに基づいて管理できます。

ガントビューによるグループ化方式を実装するには、次の手順を実行します。

Grid using Gantt Col

サンプルコード

  1. DataView参照の後に、次の参照を追加します。
    <link rel="stylesheet" href="[Your Script Path]/gc.spread.views.gantt.10.0.0.css">
    <script src="[Your Script Path]/gc.spread.views.gantt.10.0.0.min.js" type="text/javascript"></script>
        <script src="data/ganttEvent.js" type="text/javascript"></script>
  2. bodyタグ内にdivタグを追加して、ページ内のコンテナとしてDOM要素を含めます。
    <div id="grid1" style="height:100%"></div><template id="popupTemplate" style="display: none">
        <div class="dialog-body">
            <div>
                <div class="dialog-ids">
                    <div class="dialog-header">start date:</div>
                    <input type="date" class="dialog-content" data-column="start" />
                </div>
                <div class="dialog-ids" style="margin-left:40px">
                    <div class="dialog-header">end date:</div>
                    <input type="date" class="dialog-content" data-column="end" />
                </div>
            </div>
            <div class="dialog-header">description:</div>
            <textarea class="dialog-text" style="height:60px;font-style:italic;" data-column="description"></textarea>
            <div class="dialog-header">resources:</div>
            <textarea class="dialog-text" style="height:28px;" data-column="resources"></textarea>
        </div>
    </template>
  3. 列の定義を追加します。
    var columns = [{
                id: 'id',
                caption: 'Id',
                dataField: 'id',
                width: 80
            }, {
                id: 'start',
                caption: 'Start',
                dataField: 'start',
                width: 100,
                dataType: 'date',
                format: 'mmm dd,yyyy'
            }, {
                id: 'end',
                caption: 'End',
                dataField: 'end',
                width: 100,
                dataType: 'date',
                format: 'mmm dd,yyyy'
            }, {
                id: 'gantt',
                ganttColumn: {
                    timeLineScale: 'month',
                    scale: 300,
                    start: 'start',
                    end: 'end',
                    text: 'description'
                },
                width: '*'
            }, {
                id: 'description',
                caption: 'Description',
                dataField: 'description',
                visible: false
            }, {
                id: 'resources',
                caption: 'Resources',
                dataField: 'resources',
                visible: false
            }, {
                id: 'predecessorID',
                caption: 'predecessorID',
                dataField: 'predecessorID',
                visible: false,
                allowEditing: false
            }, {
                id: 'parentID',
                caption: 'parentID',
                dataField: 'parentID',
                visible: false,
                allowEditing: false
        }];
  4. DIVタグのグリッドIDを呼び出し、コードを初期化します。
    var dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout({
                colHeaderHeight: 48,
                rowHeight: 48,
                allowEditing: true,
                editRowTemplate: '#popupTemplate',
                editMode: 'popup',
                hierarchy: {
                    keyField: 'id',
                    parentField: 'parentID',
                    collapsed: false,
                    column: 'id',
                    footer: {
                        visible: false
                    }
                }
        }));